<template>
    <div>
        <el-divider><i class="el-icon-user-solid"></i></el-divider>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 列表区域 -->
            <el-table stripe border :data="patentList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column label="专利号" prop="patentID"></el-table-column>
                <el-table-column label="专利名称" prop="patentname"></el-table-column>
                <el-table-column label="专利类型" prop="patentType"></el-table-column>
                <el-table-column label="发明人" prop="inventors"></el-table-column>
                <el-table-column label="申请日期" prop="applytime"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="专利有效期" prop="times"></el-table-column>
                <el-table-column label="描述" prop="pdescribe"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-check"
                                circle
                                @click="agree(scope.row.patentID)"></el-button>
                        <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-close"
                                circle
                                @click="DeleteId(scope.row.patentID)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="patentList.length">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                patentList: [],
                queryInfo: {
                    query: '',
                },
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5,// 每页的数据条数
            }
        },

        created() {
            this.queryInfo.query = window.sessionStorage.getItem('username')
            this.getPatentList()
        },
        methods: {
            async getPatentList() {
                const {data: res_j} = await this.$http.get("CheckPatentList");
                console.log(res_j);
                this.patentList = res_j.groups;
            },
            async agree(patentID) {
                const {data: res_d} = await this.$http.get("tianjia?id=" + patentID);
                const res = JSON.parse(JSON.stringify(res_d));//转换为json对象
                console.log(res);
                if (res == "ok") {
                    this.$message.success("成功");
                    this.$router.go(0)
                } else {
                    this.$message.error("失败");
                }
            },
            async DeleteId(patentID) {
                    const {data: res_d} = await this.$http.get("deleteId?id=" + patentID);
                    const res = JSON.parse(JSON.stringify(res_d));//转换为json对象
                    console.log(res);
                    if (res == "ok") {
                        this.$message.success("成功");
                        this.$router.go(0)
                    } else {
                        this.$message.error("失败");
                    }
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },

        },
    }
</script>

<style lang="less" scoped>
    .el-breadcrumb {
        margin-top: 10px;
        margin-left: 8px;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }
    .ss{
        height: 150px;
        width: 550px;
        align-items: center;
        /*background-color: #c3fcf5;*/
        background-image: linear-gradient(-90deg, #86dfef 0%, #679dec 100%);
    }
    .el-divider--horizontal{
        margin: 8px 0;
        border-top: 0px dashed;
        background-image: linear-gradient(to right, #f8d007 0%, #5c09e0 100%);
    }

</style>
